import React from 'react'
import { NavBar, TabBar } from 'antd-mobile-v5'
// 路由
import { useNavigate, useLocation } from "react-router-dom";

import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

import './index.scss'

type Props = {
  title?: String
  isScollY?: Boolean
}

export default class TabBarCom extends React.Component<Props> {
  render() {
    const Bottom = () => {
      const history = useNavigate()
      let location = useLocation()
      // console.log(location)
      const pathname = '/' + location.pathname.split('/')[1]
      // console.log(location.pathname.split('/')[1])
      const setRouteActive = (value) => {
        console.log(value)
        history(value)
      }
    
      const tabs = [
        {
          key: '/home',
          title: '首页',
          icon: <AppOutline />,
        },
        {
          key: '/todo',
          title: '找房',
          icon: <UnorderedListOutline />,
        },
        {
          key: '/news',
          title: '咨询',
          icon: <MessageOutline />,
        },
        {
          key: '/me',
          title: '我的',
          icon: <UserOutline />,
        },
      ]
    
      return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      )
    }
    
    return (
      <div className="app">
        <div className="top">
          {/* <NavBar>{this.props.title || '好客租房'}</NavBar> */}
        </div>
        <div className="body" >
          {this.props.children}
        </div>
        <div className="bottom">
          <Bottom />
        </div>
      </div>
    )
  }
}

